<template>
	<view class="notice">
		<view class="fcc flex-justify-center noheader">
			<view class="noticebox fsb f14">
				<view class="noti" @click="notiChange(0)" :class="notIndex==0?'notActive':''">通知</view>
				<view class="noti" @click="notiChange(1)" :class="notIndex==1?'notActive':''">公告</view>
			</view>
		</view>
		<view class="noticeIn">
			<view v-if="noticeList.length==0&&!loadingMore" class="mt80">
				<image src="../../static/user/nodata.png" class="nodata"></image>
				<view class="text--center notxt">暂无任何数据</view>
			</view>
			<view class="px10 pb20" v-else>
				 <!-- @click="navigatePage('/pages/home/notidetail?item='+encodeURIComponent(JSON.stringify(notice)), 'slide-in-right')" -->
				<view class="px15 py15 noticeitem mb10" v-for="(notice,noindex) in noticeList" :key ="noindex" @click="noticeEnter(notice.id)">
					<view class="fcc flex-justify-between">
						<view class="ellipsis notitle f14 fwb">{{notice.title}}</view>
						<view :class="notice.read==0?'color-pink':'sgrey'" class="f12">{{notice.read==0?'未读':'已读'}}</view>
					</view>
					<view class="mt8 f12 sgrey">{{notice.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="cu-load f12 color-info" :class="loadingMore ? 'loading' : 'over'" v-if="noticeList.length>8">{{ loadingMore ? '加载中...' : '没有更多了' }}</view>
	</view>
	<!-- 闪兑 -->
</template>

<script>
	import { mapState, mapActions } from 'vuex';
	import { formatTimes } from '@/utils/lutils/random/index.js'
	export default {
		data() {
			return {
				notIndex:0,
				noticeList:[
					{title:'STD盛大公链上线了',read:0,createTime:'2021–01-18 09:28:59'},
					{title:'STD盛大公链上线了盛大公链上线了',read:1,createTime:'2021–01-18 09:28:59'}
				],
				page:0
			}
		},
		onShow() {
			// this.clearData()
			// this.getData()
		},
		onReachBottom() {
			// this.getData()
		},
		methods:{
			back(){
				uni.reLaunch({
					url:'/pages/home/index'
				})
			},
			notiChange(ind){
				this.notIndex = ind
			},
		// 获取公告未读
			async getData(){
				if (this.finish) return
				let para={
					pageNo:this.page,
					pageSize:8
				}
				let headerUUid = this.randomString(Math.ceil(Math.random()*10))
				let { data } = await this.$http.post('home.newsList',para,{isAuth: true,isId:true,header:{phoneUuid :headerUUid},tipConfig: { isLoading: false } })
				data.forEach((item,index) => {
					item.createTime = formatTimes(item.createTime,'Y-M-D h:m:s')
				})
				this.finish = data.length < 8
				!this.finish && (this.page += 1)
				this.noticeList = [...this.noticeList, ...data]
			},
			async noticeEnter(id){
				// let headerUUid = this.randomString(Math.ceil(Math.random()*10))
				// await this.$http.post('home.newsRead', { messageId: id }, {  isAuth: true,header:{phoneUuid :headerUUid} ,tipConfig: { isLoading: false } })
				this.pushPage('/pages/Home/notidetail?itemid='+id, 'slide-in-right')
			},
			async noticeAllread(){
				let headerUUid = this.randomString(Math.ceil(Math.random()*10))
				await this.$http.post('home.newsAllread', {}, {  isAuth: true,header:{phoneUuid :headerUUid} ,tipConfig: { isLoading: false , isSuccessDefaultTip: true} })
				this.clearData()
				this.getData()
			},
			clearData(){
				this.page = 0
				this.finish = false
				this.noticeList = []
			}
		}
	}
</script>

<style lang="less">
	.notice{
		min-height: 100vh;
		background-color: #F5F5F5;
	}
	.color-pink{
		color: #FB560A;
	}
	.noheader{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		z-index: 10;
		padding: 40rpx 0 20rpx;
		background-color: #fff;
		.noticebox{
			width: 400rpx;
			height: 64rpx;
			background-color: #308ae4;
			border-radius: 16rpx;
			color: #fff;
			.noti{
				width: 188rpx;
				border-radius: 16rpx;
				height: 60rpx;
				border:2rpx solid #308ae4;
				line-height: 60rpx;
				text-align: center;
			}
			.notActive{
				background-color: #fff;
				color: #3E89DA;
			}
		}
	}
	.noticeIn{
		padding-top: 150rpx;
		.noticeitem{
			background-color: #fff;
			border-radius: 8rpx;
			.notitle{
				color:#272E3F;
				max-width:480rpx
			}
		}
	}
</style>
